<template>
    <el-container class="cantainer-box">
        <el-header>
            <el-select v-model="paramForm.status" placeholder="请选择" style="width: 150px;margin-right: 10px;">
                <el-option v-for="item in statusTypeOption" :key="item.type" :value="item.type" :label="item.msg"></el-option>
            </el-select>
            <el-button type="primary" @click="refreshList">查询</el-button>
        </el-header>
        <el-main>
            <el-table :data="memberState.pageData.records" style="width: 100%">
                <el-table-column fixed="left" label="操作" min-width="140" v-slot="scope">
                    <el-button link type="primary" size="small" @click="runDoQuestion(scope.row,1)">签到</el-button>
                    <el-button link type="primary" size="small" @click="runDoQuestion(scope.row,2)">知识点</el-button>
                    <el-button link type="primary" size="small" @click="runDoQuestion(scope.row,3)">视频</el-button>
                    <el-button link type="primary" size="small" @click="runDoQuestion(scope.row,4)">练习</el-button>
                    <el-button link type="primary" size="small" @click="runDoQuestion(scope.row,5)">模拟考试</el-button>
                    <el-button link type="primary" size="small" @click="runDoQuestion(scope.row,6)">手机考试</el-button>
                    <el-button link type="primary" size="small" @click="runDoQuestion(scope.row,8)">更新</el-button>
                </el-table-column>
                
                <el-table-column prop="points1" label="签到(1)" min-width="80"></el-table-column>
                <el-table-column prop="points2" label="知识点1" min-width="80"></el-table-column>
                <el-table-column prop="points3" label="模拟考试6" min-width="100"></el-table-column>
                <el-table-column prop="points4" label="手机考试16" min-width="100"></el-table-column>
                <el-table-column prop="points5" label="视频1" min-width="60"></el-table-column>
                <el-table-column prop="points6" label="练习3" min-width="60"></el-table-column>
                <el-table-column prop="updateTime" label="更新时间" min-width="100"></el-table-column>
                <el-table-column prop="username" label="用户" min-width="70"></el-table-column>
            </el-table>
        </el-main>
        <el-footer>
            <div class="demo-pagination-block">
                <el-pagination
                    v-model:current-page="memberState.pageData.pageNum"
                    v-model:page-size="memberState.pageData.pageSize"
                    :page-sizes="[10, 20, 50, 100]"
                    :size="size"
                    :disabled="disabled"
                    :background="background"
                    layout="sizes, prev, pager, next"
                    :total="memberState.pageData.recordsTotal"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div>
        </el-footer>
    </el-container>

</template>

<script setup lang="ts" name="MkEveryDayStatusTwo">


import { ref,reactive, onMounted } from 'vue'
import { viewDayStatusListApi,runQuestionByMemberIdApi } from '@/http/api/mk/mkDoQuestion';
import { MkMember} from '@/bean/mk/MkMember';
import type { ComponentSize,ElButton  } from 'element-plus';
import { ElMessage } from 'element-plus';
import { MyPageData } from '@/bean/base/page';


const statusTypeOption = [
    {type:0,msg:"全部"},
    {type:1,msg:"完成用户"},
    {type:2,msg:"未完成用户"}
];

const paramForm = reactive({
    pageNum: 1,
    pageSize: 10,
    status : 0,
    type:2
})




const memberState = reactive(new MyPageData<MkMember>);



onMounted(() => {
    refreshList();
})

//获取页面数据
async function refreshList() {
    viewDayStatusListApi(paramForm).then((res)=>{
        memberState.pageData = res.data;
    });
}

function runDoQuestion(item:any,type:number) {
    let tempParam = {
        id:item.memberId,
        type:type
    };
    runQuestionByMemberIdApi(tempParam).then((res:any)=>{
        refreshList();
        ElMessage({
            message: '操作成功',
            type: 'success',
        })
    });
}




const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
    paramForm.pageSize = val;
    refreshList();
}
const handleCurrentChange = (val: number) => {
    paramForm.pageNum = val;
    refreshList();
}

</script>

<style scoped>
.default-table-box,.el-container {
  width: 100%;
  height: 100%;
}

.el-footer {
    height: 80px;
}
    
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}

</style>